<template>
    <div class="countainer_login">
        <el-row>
            <el-col :span="12" :xs="0"></el-col>
            <el-col :span="12" :xs="24">
                <el-form class="form_login" :model="Login_Form" :rules="rules">
                    <h1>Hello</h1>
                    <h2>欢迎登录</h2>
                    <el-form-item prop="username">
                        <el-input :prefix-icon="User" v-model="Login_Form.username" clearable W></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input :prefix-icon="Lock" v-model="Login_Form.password" show-password clearable ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" class="btn_login" plain @click="login_click" :loading="loading">登录</el-button>
                    </el-form-item>
                </el-form>
            </el-col>       
        </el-row>
    </div>
</template>

<script setup lang="ts">
    import {User,Lock} from '@element-plus/icons-vue'
    import { reactive, ref } from 'vue';
    import userUserStore from '@/store/modules/user';
    import { useRouter,useRoute } from 'vue-router';
    import { ElNotification } from 'element-plus';
    import { houres } from '@/utils/times';
    import router from '@/router'
    import type {loginFormData} from '@/api/user/type'


    const $router = useRouter();
    const $route = useRoute();

    let loading=ref<boolean>(false)
    let userStore=userUserStore()
    let Login_Form=reactive<loginFormData>({username:'admin',password:'123456'})
    
    
    //点击登录按钮回调
    async function login_click(){
        // 加载效果
        loading.value= true
        try {
            
            await userStore.Login_request(Login_Form) 
            loading.value= false
            // 登录成功后跳转
            let redirect:any=$route.query.redirect
            let routePath=router.getRoutes()
            //判断当前用户是否包含重定向的路由，包含就跳转，不包含就回到首页
            if(routePath.find(item=>item===redirect)){
                // 跳转页面
                $router.push({path:redirect||'/'})
            }else{
                $router.push('/')
            }
            
            
            ElNotification({
                    title:  'Hi!'+houres()+'好！',
                    message: '登录成功',
                    type: 'success',
                })
        }catch (error:any) {
            loading.value= false
            ElNotification({
                title: '失败',
                message: error.message,
                type:'error',
            })
        }
   
    }
    // 输入规则制定
    const validatorUserName=(_rule:any,value:any,callback:any)=>{
        if(value.length>=6&&value.length<=10){
            callback()
        }else{
            callback(new Error('账户名需要6-10位'))
        }  
    }
    const validatorPassWord=(_rule:any,value:any,callback:any)=>{
        if(value.length>=6&&value.length<=15){
            callback()
        }else{
            callback(new Error('账户名需要6-15位'))
        }  
    }

    const rules = reactive( {
        username:[
            // { required: true, min:5,max:10,message: '账户名需要6-10位', trigger: 'change' },
            {trigger:'change',validator:validatorUserName}
        ],
        password:[
            // {required:true,min:5,max:15,message:'密码需要5-15位',trigger:'change'},
            {trigger:'change',validator:validatorPassWord}
        ]
    })



</script>

<style lang="scss" scoped>
    .countainer_login{
        width: 100%;
        height: 100vh;
        background: url('@/assets/picture_my/login_background.png') no-repeat; 
        background-size: cover;  
        .form_login{
            position: relative;
            width: 80%;
            height: auto;
            background: linear-gradient(to right, rgba(235, 126, 67, 0.5), rgba(225, 89, 89, 0.5));
            border-radius: 10px;
            margin: 0 auto;
            padding: 20px;
            top: 30vh;

            h1{
                font-size: 20px;
                font-weight: bold;
                color: #fff;
                text-align: center;
                margin: 20px 0;
            }
            h2{
                font-size: 16px;
                font-weight: bold;
                color: #fff; 
                margin: 10px 0;
            }
            el-input{
                width: 100%;
                margin: 10px 0; 
                
            }
            .btn_login{
                width: 100%;
                margin: 10px 0;
                background: rgb(255, 255, 255,0.6);
                color: #000;
                font-weight: bold;
               
            }
            el-form-item{
                el-input{
                
                    :deep(.el-input__wrapper) {
                    background-color: rgba(255, 255, 255, 0.6); // 设置输入框背景透明度
                }

            }
            }

        }
        // 添加表单验证错误提示样式
        :deep(.el-form-item__error) {
            color: #ffffff; // 修改为橙色
            font-size: 12px;
            padding-top: 4px;
        }
    }
</style>